<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Item Management</title>
     <style>
        table {
            margin: 0 auto; /* 表格居中 */
            border-collapse: collapse; /* 合并表格边框 */
            width: 80%; /* 设置表格宽度 */
        }

        th, td {
            border: 1px solid black; /* 显示单元格边框 */
            padding: 8px; /* 添加内边距 */
            text-align: left; /* 文本左对齐 */
        }
        /* 新增按钮样式 */
        .action-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            margin: 2px;
        }
        .action-button:hover {
            background-color: #0056b3;
        }
        /* 按钮容器居中 */
        .button-container {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Material Spec Management</h1>
    <div class="button-container">
        <a href="/create/material" class="action-button">Create New Item</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>Item_id</th>
                <th>Name</th>
                <th>Spec</th>
                <th>Unit</th>
                <th>Price_Per_Unit</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for item in material_spec_items %}
            <tr>
                <td>{{ item.item_id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.spec }}</td>
                <td>{{ item.unit }}</td>
                <td>{{ item.price_per_unit }}</td>
                <td>
                    <a href="/edit/material/{{ item.item_id }}">Edit</a>
                    <a href="/delete/material/{{ item.item_id }}">Delete</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <h1>Material Request Management</h1>
    <div class="button-container">
        <a href="/create/material_request" class="action-button">Create New Item</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>Request_id</th>
                <th>User</th>
                <th>Total_Price</th>
                <th>datetime</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for item in material_request_items %}
            <tr>
                <td>{{ item.request_id }}</td>
                <td>{{ item.user }}</td>
                <td>{{ item.total_price }}</td>
                <td>{{ item.datetime }}</td>
                <td>
                    <a href="/show/material_request/{{ item.request_id }}">Show</a>
                    <a href="/edit/material_request/{{ item.request_id }}">Edit</a>
                    <a href="/delete/material_request/{{ item.id }}">Delete</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>
